<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<view class="friend friend_Page">
				<u-navbar title="发布"  @leftClick="leftClick"  :autoBack="false" ></u-navbar>
				
				
				<view class="form">
					<view class="imgList" v-if="type">
						<view class="list nobg" v-for="(item, index) in form.images" :key="index" @click="viewImg(index)">
							<i class="iconfont delImg" @click.stop="delImg(index)">&#xe785;</i>
							<image :src="item" class="fileImg" mode="aspectFill"></image>
						</view>
						<view class="list" @click="chooseImage" v-if="form.images.length < 12">
							<i class="iconfont">&#xe889;</i>
						</view>
						<!-- 占位 -->
						<div class="list zhanwei" v-for="index in 4" :key="index"></div>
					</view>
					<view class="imgList" v-else>
						<view class="list" @click="chooseVideo" v-if="form.videos.length == 0">
							<i class="iconfont">&#xe609;</i>
							<view class="">添加视频</view>
						</view>
						<view class="list" @click="chooseVideo" v-else>
							<image :src="form.videos[0]+'?x-oss-process=video/snapshot,t_7000,f_jpg,w_160,h_200,m_fast'"
								mode="aspectFill"></image>
						</view>
					</view>
					<!-- <input class="titleBox" type="text" placeholder="填写标题会有更多赞哦" v-model="form.title"
						placeholder-style="font-size:32rpx" /> -->
					<textarea placeholder="勇敢表达吧，你的有趣，总有人懂" v-model="form.content" class="contentArea" maxlength=-1></textarea>
					
				<!-- 	<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<view class=""  style="display: flex;align-items: center;">
							<span class="fabubtn" @click="fabu(1)" style="margin-right: 20rpx;">发布</span>
							<span class="fabubtn" @click="fabu(2)">保存草稿</span>
						</view>
						
						<span class="fabubtn" @click="type = !type">上传{{type?'视频':'图片'}}</span>
					</view> -->
					
					
					<view class="lastbox">
					<!-- 	<view class="addhuati">
							<i class="iconfont">&#xe8c4;</i>
							<span>加话题</span>
							<i class="iconfont">&#xe613;</i>
						</view> -->
						<view class="lastjdiw" style="margin-top: 30rpx;display: flex;justify-content: space-between;">
							<view class="addhuati address" v-if="form.location">
								<i class="iconfont">&#xe65e;</i>
								<span>{{form.location}}</span>
							</view>
							
							<view class="addhuati address" @click="changeprivacy" :class="form.privacy == 'all'?'active':''">
								<span>广场可见</span>
							</view>
							<view class="addhuati address active" @click="fabu(1)" >
								<span>发布</span>
							</view>
						</view>
						
						<view class="tabs" style="">
							<view class="li" :class="type?'actives':''" @click="type = true">
								发图文 <span class="line" />
							</view>
							<view class="li" :class="!type?'actives':''" @click="type = false">
								发视频 <span class="line" />
							</view>
						</view>
					</view>
					
					<view style="height: 50rpx;"></view>
				</view>
				
				<w-compress ref='wCompress' />
				
			</view>
		</view>
	</view>
	
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	import minxins from '../../common/upload.js';
	export default {
		mixins: [minxins],
		components: {WCompress},
		data() {
			return {
				isback:false,
				type:true,
				form: {
					businessName: '',
					content: '',
					htmlMoment:true,
					images: [],
					isDraft: false,
					location: '',
					momentId:'',
					posterUrl:'',
					privacy: 'all',
					type:'',
					latitude: '',
					longitude: '',
					videos:[]
				},
			};
			
			
		},
	
		onShow(e) {
			
		},
		methods: {
			delImg(index) {
				this.form.images.splice(index, 1);
			},
			leftClick(){
				uni.showModal({
				    title: '提示',
				    content: '是否保存草稿？',
				    success:  (res) =>{
				        if (res.confirm) {
							this.isback = true
							this.fabu(2)
				        }else{
							uni.navigateBack()
						}
				    }
				});

			},
			changeprivacy(){
			  if(this.form.privacy == 'all'){
				  this.form.privacy = 'self'
			  }	else{
				  this.form.privacy = 'all'
			  }
			},
			fabu(type){
				if (this.form.title == '') {
					return this.$Show.show('请输入标题')
				}
				
				if(this.type){
					if (this.form.images.length == 0) {
						return this.$Show.show('请上传图片')
					}
				}else{
					if (this.form.videos.length == 0) {
						return this.$Show.show('请上传视频')
					}
				}
				
				
				if(type == 1){
					this.form.isDraft = false
					this.$api2.upsertMoment(this.form).then(res=>{
						this.$Show.show('发布成功')
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pagesfriend/tabbar/index'
							})
						},1500)
					})		
				}else{
					this.form.isDraft = true
					this.$api2.upsertMoment(this.form).then(res=>{
						this.$Show.show('发布成功')
						if(this.isback){
							uni.navigateBack()
						}else{
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pagesfriend/tabbar/index'
								})
							},1500)
						}
						
					})		
				}
				
					
			},
			
			viewImg(index) {
				uni.previewImage({
					urls: this.form.images,
					current: index
				});
			},
			chooseImage() {
				if (this.form.images.length > 12) {
					return;
				}
				console.log('123')
				uni.chooseImage({
					count: (12 - this.form.images.length),
					success: res => {
						// #ifdef MP-WEIXIN
			
						this.$refs.wCompress.start(res.tempFilePaths).then(res2 => {
							res2.forEach((item, index) => {
								var fileName = Date.now() + '_' + Math.round(Math.random() *100000000) + '.' + item.substring(item.lastIndexOf('.') + 1)
			
								var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ?uni.getStorageSync('maxImageMegBytes') : 20
			
								var resSize = res.tempFiles[index].size;
								if (resSize > maxImageMegBytes * 1024 * 1024) {
									uni.showToast({
										title: `大小不能超过${maxImageMegBytes}MB`,
										icon: 'none'
									});
									return
								}
			
								var familyId = uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] :''
			
								this.uploadUserImage(item, 'image', fileName, familyId, (
									imgUrl) => {
									this.form.images.push(imgUrl);
								})
							})
						})
						// #endif
						
						// #ifndef MP-WEIXIN
						for (let i = 0; i < res.tempFiles.length; i++) {
						
							var item = res.tempFiles[i]
							
							// #ifdef APP-PLUS
							var houzui = item.path.substring(item.path.lastIndexOf('.') + 1)
							// #endif
						
							// #ifdef H5
							var houzui = item.name.substring(item.name.lastIndexOf('.') + 1)
							// #endif
						
							var name = Date.now() + '_' + Math.round(Math.random() * 100000000)
						
							var path = item.path
							var fileName = name + '.' + houzui
						
							var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ? uni.getStorageSync(
								'maxImageMegBytes') : 20
						
							var resSize = item.size;
							if (resSize > maxImageMegBytes * 1024 * 1024) {
								uni.showToast({
									title: `大小不能超过${maxImageMegBytes}MB`,
									icon: 'none'
								});
								return
							}
						
						
							var familyId = uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] :
								''
						
						
							// #ifdef APP-PLUS
							uni.compressImage({
								src: path,
								quality: 30,
								compressedWidth: 300,
								success: res => {
									this.uploadUserImage(res.tempFilePath, 'image', fileName,
										familyId, (
											imgUrl) => {
											this.form.images.push(imgUrl);
										})
								}
							})
							// #endif
							// #ifdef H5
							const maxWidth = 800; // 最大宽度
							const maxHeight = 800; // 最大高度
							const quality = 0.9; // 压缩质量
							this.getImageInfo2(path,fileName,maxWidth, maxHeight, quality).then((result) => {
								console.log('111111111',result.imgSrc,result.fileName,familyId);
								this.uploadUserImage(result.imgSrc, 'image', result.fileName, familyId, (
									imgUrl) => {
									this.form.images.push(imgUrl);
								})
							})
							
							// 这个不压缩肯定没有问题，但是图片太大，性能差，还浪费空间
							// this.uploadUserImage(path, 'image', fileName, familyId, (
							// 	imgUrl) => {
							// 	this.form.images.push(imgUrl);
							// })
							// #endif
						
						}
						
						// #endif
						
			
					},
					fail: err=>{
						console.log(err)
					}
				});
			
			
			},
			chooseVideo() {
				uni.chooseVideo({
					count: 1,
					compressed: true,
					success: (res) => {
						console.log(res)
						let name = Date.now() + '_' + Math.round(Math.random() * 100000000)
			
						// // #ifdef APP-PLUS
						// let houzui = res.tempFilePath.substring(res.tempFilePath.lastIndexOf('.') + 1)
						// // #endif
						// #ifdef MP-WEIXIN
						let houzui = res.tempFilePath.substring(res.tempFilePath.lastIndexOf('.') + 1)
						// #endif
			
						// #ifdef H5
						let houzui = res.name.substring(res.name.lastIndexOf('.') + 1)
						// #endif
						let fileName = name + '.' + houzui
						let path = res.tempFilePath
						console.log(fileName)
			
			
						let maxVideoMegBytes = uni.getStorageSync('maxVideoMegBytes') ? uni.getStorageSync(
							'maxVideoMegBytes') : 100
			
						let resSize = res.size;
						console.log(res)
						if (resSize > maxVideoMegBytes * 1024 * 1024) {
							uni.showToast({
								title: `大小不能超过${maxVideoMegBytes}MB`,
								icon: 'none'
							});
							return
						}
			
						console.log('压缩后', res)
						let familyId = uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] : ''
						
						this.uploadUserImage(path, 'video', fileName, familyId, (url) => {
							console.log(url)
							this.form.videos = [url]
							console.log(this.form)
						})
						
					}
				});
			
			},
			

		}
	};
</script>


<style lang="scss" scoped>
	.form {
		border-top: 1px solid #f9f9f9;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.imgList {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
	
			.list {
				width: 170rpx;
				height: 170rpx;
				display: flex;
				align-items: center;
				background-color: #f8f8f8;
				justify-content: center;
				flex-direction: column;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				position: relative;
	
				.delImg {
					font-size: 42rpx;
					position: absolute;
					right: 3px;
					top: 3px;
					color: #fff !important;
					z-index: 10;
				}
	
				view {
					font-size: 24rpx;
					color: #b7b7b7;
					margin-top: 15rpx;
				}
	
				.iconfont {
					color: #b7b7b7;
					font-size: 40rpx;
				}
	
				.fileImg {
					width: 100%;
					height: 100%;
				}
			}
	
			.nobg {
				background-color: #fff;
			}
	
			.zhanwei {
				visibility: hidden;
				height: 0;
				margin: 0;
			}
			
			image{
				width: 170rpx;
				height: 170rpx;
			}
		}
	
		.titleBox {
			height: 100rpx;
			font-size: 32rpx;
			border-bottom: 1px solid #f8f8f8;
		}
	
		.contentArea {
			font-size: 30rpx;
			width: 100%;
			height: 43vh;
			margin-top: 30rpx;
		}
	}
	
	.lastbox{
		.addhuati{
			display: flex;
			align-items: center;
			background-color: #e9fafa;
			padding:15rpx 0;
			border-radius: 50px;
			width: 180rpx;
			justify-content: center;
			white-space: nowrap;
			span{
				font-size: 30rpx;
				margin: 0 3px;
				color: #25d4d0;
			}
			.iconfont{
				color: #25d4d0;
			}
		}
		
		
		
		.address{
			display: flex;
			align-items: center;
			background-color: #ffffff;
			padding:15rpx 0;
			border-radius: 50px;
			width: 210rpx;
			justify-content: center;
			white-space: nowrap;
			border: 1px solid #ededed;
			
			span{
				font-size: 30rpx;
				margin: 0 3px;
				color: #888888;
				overflow: hidden;
				text-overflow: ellipsis;    
				white-space: nowrap;
				
			}
			.iconfont{
				color: #888888;
			}
		}
		
		.active{
			background-color: #25d4d0;
			span{
				color: #fff!important;
			}
			
		}
	}
	
	.fabubtn{
		border-radius: 40px;
		color: #fff;
		font-size: 30rpx;
		padding:15rpx 0;
		border-radius: 50px;
		width: 160rpx;
		background-color: #25d4d0;
		display: inline-block;
		text-align: center;
		margin: 20rpx;
	}
	
	.tabs{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		.li{
			width: 50%;
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 32rpx;
			.line{
				width: 40%;
				height: 6rpx;
				border-radius: 20px;
				background-color: #25d4d0;
				margin-top: 10rpx;
				opacity: 0;
			}
		}
		.actives{
			font-size: 34rpx;
			font-weight: bold;
			.line{
				opacity: 1;
			}
		}
	}
	
	.toubu{
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		
		.iconfont{
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 36rpx;
			z-index: 100;
		}
	}
</style>